<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        body {
            margin: 0;
        }

        .topnav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        .topnav li {
            float: left;
        }

        .topnav li a {
            display: inline-block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            transition: 0.3s;
            font-size: 17px;
        }

        .topnav li a:hover {
            background-color: #111;
        }

        .topnav li.icon {
            display: none;
            /*    隐藏图标      */
        }

        @media screen and (max-width:680px) {
            .topnav li:not(:first-child) {
                display: none;
                /*   第一个 li  不隐藏  */
            }

            .topnav li.icon {
                float: right;
                display: inline-block;
            }

            .topnav.responsive {
                position: relative;
            }

            .topnav.responsive li.icon {
                position: absolute;
                right: 0;
                top: 0;
            }

            .topnav.responsive li {
                float: none;
                display: inline;
            }

            .topnav.responsive li a {
                display: block;
                text-align: left;
            }
        }
    </style>

    <ul class="topnav">
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">内容</a></li>
        <li><a href="#about">关于</a></li>
        <li class="icon">
            <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
        </li>
    </ul>

    <h1>可通过重置浏览器大小查看效果</h1>



    <style>

    </style>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>

    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/Tesla (10).jpeg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/Tesla (11).jpeg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/Tesla (13).jpeg" alt="">
            </div>
        </div>
    </div>
    <script>
        var mySwiper = new Swiper('.swiper', {
            autoplay: true,//可选选项，自动滑动
        })

        //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
        new Swiper('.swiper')
        var mySwiper = document.querySelector('.swiper').swiper
        mySwiper.slideNext();
    </script>























    <script>
        function myFunction() {
            document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
        }
    </script>

</body>

</html>